<%--
  Created by IntelliJ IDEA.
  User: FENG1
  Date: 2022/5/11
  Time: 17:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>Title</title>
    <link rel="stylesheet" href="static/component/pear/css/pear.css" />
    <link rel="stylesheet" href="static/admin/css/other/department.css"/>
    <style>
        .cangku{
            color:red;
            float: left;
            margin-left: 25px;
            margin-right: 25px;
        }
        .cangkuName{
            font-size: 25px;
            font-weight: bold;
            position: absolute;
            margin-left:53px;
            margin-top: -55px;
        }
        ._percentageTag{
            font-size: 20px;
            font-weight: bold;
            margin-right: 12px;
        }
        button{
            border: none;
            cursor:pointer;
            background: transparent;
        }
        .flag{
            width: 100%;
            height: 60px;
            padding-left: 30px;
            background-color:white;
        }
        .lb{
            cursor:pointer;
            margin: 5px;
            padding: 4px;
            border-radius:20%;
        }
        .liebiao{
            background-color: #D8BFD8;
        }
        .layui-card{
            margin-top: 15px;
            display: none;
        }
        .ck{
            margin-top: 5px;
        }
    </style>
</head>
</head>
<body class="pear-container">
    <shiro:hasAnyRoles name="经理">
        <input type="hidden" name="fleg" value="1">
    </shiro:hasAnyRoles>
    <div class="flag">
        <button class="pear-icon  lb pear-icon-browse liebiao" title="视图模式" style="font-size: 40px; color: #1E9FFF;"></button>
        <button class="layui-icon lb liebiao1 layui-icon-cols" title="列表模式" style="font-size: 40px; color: #1E9FFF;"></button>
    </div>
    <div class='layui-card'>
        <div class='layui-card-body'>
            <table id='repostory-table' lay-filter='repostory-table' class='layui-hide'></table>
        </div>
    </div>

</body>
<script type="text/html" id="repostory-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
</script>
<script type="text/html" id="repostory-bar">

    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
            class="layui-icon layui-icon-edit"></i></button>
    <shiro:hasAnyRoles name="经理,系统管理员">
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
            class ="layui-icon layui-icon-delete"></i></button>
    </shiro:hasAnyRoles>
</script>
<script type="text/html" id="empid">
    {{d.empid.eName}}
</script>
<script src="static/js/jquery-3.6.0.js"></script>
<script src="static/component/layui/layui.js" charset="utf-8"></script>
<script src="static/component/pear/pear.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="static/js/waterTank.js"></script>
<script>
            layui.use(['table', 'form', 'jquery', 'dtree'], function() {
                let table = layui.table;
                let form = layui.form;
                let $ = layui.jquery;
                let dtree = layui.dtree;
                let MODULE_PATH = "operate/";
                let cols = [[
                    {field:'reponseTypePid',title:'仓库Id',  align: 'center'},
                    {field:'reponseTypeName',title:'仓库名称',  align: 'center'},
                    {field:'empid.eName',title:'仓库负责人',  align: 'center',templet: "#empid"},
                    {field:'reponseTime',title:'创建时间',  align: 'center'},
                    {field:'capcity',title:'仓库容量',  align: 'center'},
                    {field:'capcityxhao',title:'已用容量',  align: 'center'},
                    {field:'remark',title:'备注',  align: 'center'},
                    {title:'操作',  align: 'center',toolbar: '#repostory-bar',width: 130},
                ]]
                //列表切换事件
                $(".liebiao1").click(function (){
                    //parent.$(".layui-icon-refresh-1").click();
                    //隐藏 视图 和背景
                    $("body").find(".ck").hide();
                    $(this).css("background-color","#D8BFD8");
                    $(".liebiao").css("background-color","white");
                    //显示列表头
                    $(".layui-card").show();
                    table.render({
                        elem: '#repostory-table',
                        url: 'repostory/allRep',
                        page: false,
                        cols: cols,
                        skin: 'line',
                        toolbar: '#repostory-toolbar',
                        defaultToolbar: [{
                            title: '刷新',
                            layEvent: 'refresh',
                            icon: 'layui-icon-refresh',
                        }, 'filter', 'print', 'exports']
                    });
                })
                //切换视图事件
                $(".liebiao").click(function (){
                    //显示图形
                    $("body").find(".ck").show();
                    //隐藏列表
                    $(".layui-card").hide();
                    $(this).css("background-color","#D8BFD8");
                    $(".liebiao1").css("background-color","white");
                })
                $(function(){
                    var reps=${reps};//仓库集合  底层转换JSON集合
                    for (let i =0;i<reps.length;i++){
                        $("body").append("<div class='ck' onclick='kucun("+reps[i].reponseTypePid+");'><div class='cangku'><div class='cangku-1'></div><div class='cangkuName'></div></div></div>");
                    }
                    for (let i =0;i<reps.length;i++){
                        //获取总量
                        var capcity = reps[i].capcity;
                        //获取已用量
                        var capcityxhao = reps[i].capcityxhao;
                        //计算百分比
                        var total = capcityxhao/capcity*100;
                        $('.cangku-1').eq(i).waterTank({
                            width: 180,
                            height: 180,
                            color: '#2F4F4F',
                            level: parseInt(total)
                        })
                        $('.cangkuName').eq(i).text(reps[i].reponseTypeName);
                    }
                })
                table.on('tool(repostory-table)', function (obj) {
                    if (obj.event === 'remove') {
                        window.remove(obj);
                    } else if (obj.event === 'edit') {
                        window.edit(obj);
                    }
                });

                table.on('toolbar(repostory-table)', function (obj) {
                    if (obj.event === 'add') {
                        window.add();
                    } else if (obj.event === 'refresh') {
                        window.refresh();
                    }
                });
                window.add = function () {
                    var sign = "add";
                    var did = 1;
                    layer.open({
                        type: 2,
                        title: '新增',
                        shade: 0.1,
                        area: ['800px', '350px'],
                        content: "repostory/addRep"
                    });
                }
                var area = ['800px', '230px'];
                   if($("[name='fleg']").val()==1){
                        area =  ['800px', '400px'];
                   }
                //修改操作
                window.edit = function (obj) {
                    let did = obj.data.reponseId;
                    var sign = "up";
                    layer.open({
                        type: 2,
                        title: '修改',
                        shade: 0.1,
                        area: area,
                        content: "repostory/upRep?repid=" + obj.data.reponseTypePid
                    });
                }
                //删除操作
                window.remove = function (obj) {
                    var repid = obj.data.reponseTypePid;
                    alert(repid);
                    layer.confirm('确定要删除该用户', {
                        icon: 3,
                        title: '提示'
                    }, function (index) {
                        layer.close(index);
                        let loading = layer.load();
                        $.ajax({
                            url: "repostory/delRep?repid=" + repid,
                            type: 'delete',
                            success: function (result) {
                                layer.close(loading);
                                if (result.success) {
                                    layer.msg(result.msg, {
                                        icon: 1,
                                        time: 1000
                                    }, function () {
                                        obj.del();
                                        parent.$(".layui-icon-refresh-1").click();
                                    });

                                } else {
                                    layer.msg(result.msg, {
                                        icon: 2,
                                        time: 1000
                                    });
                                }
                            }
                        })
                    });
                }
                window.refresh = function (param) {
                    table.reload('repostory-table');
                }
            })
</script>
<script>
    function kucun(reponseTypePid) {
        window.location = "stock/index?reponseTypePid="+reponseTypePid;
    }
</script>
</html>